<template>
    <div>
        <el-row type="flex" justify="center" style="padding-top:30px;background: #FCF8E3">
            <el-form 
                :rules="rules"
                ref="formData" 
                :model="formData"
                label-width="100px"
                style="width: 400px;"
                status-icon >
                <el-form-item label="姓名：" prop="nickName">
                    <el-input v-model="formData.nickName"  maxlength="30" placeholder="真实姓名或昵称"></el-input>
                </el-form-item>
                <el-form-item label="手机号：" prop="mobile">
                    <el-input v-model="formData.mobile" maxlength="11" placeholder="11 位手机号码">
                    </el-input>
                </el-form-item>
                <el-form-item label="邮箱：" prop="email">
                    <el-input v-model="formData.email" maxlength="40" placeholder="用于收取通知邮件" >
                    </el-input>
                </el-form-item>
                <el-form-item align="center">
                    <el-button size="mini" type="primary" :loading="loading" @click="submitForm('formData')">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-row>
    </div>
</template>

<script>
import {isvalidUsername, isvalidMobile, isvalidEmail} from '@/utils/validate'
export default {
    props: {
        loading: { // 是否点击确定按钮
            type: Boolean,
            default: false
        },
        formData: {
            type: Object,
            default: () => {
                return {
                    username: '',
                    nickName: '',
                    mobile: '',
                    email: ''
                }
            }
        }
    },

    methods: {
        //提交表单
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
            if (valid) {
                // 校验通过，提交数据
                this.$emit('submitForm')
            } else {
                // 验证不通过
                return false;
            }
        })
      }
    },

    data() {
        var checkNickName = (rule, value, callback) => {
            if (!value) {
                callback(new Error('姓名不能为空'))
            }else if (value.length > 30) {
               callback(new Error('最多30个字符'))
            }else {
                callback();
            }
        };
        var checkMobile = (rule, value, callback) => {
            if (!value) {
                callback(new Error('手机号不能为空'))
            }else if (!isvalidMobile(value)) {
                callback(new Error('手机号不合法'))
            }else {
                callback();
            }
        };
        var checkEmail = (rule, value, callback) => {
            if (!value) {
                callback(new Error('邮箱不能为空'))
            }else if (!isvalidEmail(value)) {
                callback(new Error('邮箱不合法'))
            }else {
                callback();
            }
        };

        return {
            rules: {
                nickName: [{ required: true, validator: checkNickName, trigger: 'blur' }],
                mobile: [{ required: true, validator: checkMobile, trigger: 'blur' }],
                email: [{ required: true, validator: checkEmail, trigger: 'blur' }],
            }
        }
    },
}
</script>